import React from 'react';
import '@/components/Nav/Nav.scss'
import { Breadcrumb } from 'antd';
import { useState } from 'react';
import { useSelector } from "react-redux";
import func from '../../utils/tools'

interface Props {

}

function Nav(props: Props) {
    let bread = useSelector((newstate: any) => newstate.keyPath)
    // console.log(bread);

    return (
        <div className="nav">
            <Breadcrumb className='bread'>
                {/* <Breadcrumb.Item>首页</Breadcrumb.Item> */}
                {
                    bread.length != 0 &&
                    bread.map((item: string, index: any) => {
                        return (
                            <Breadcrumb.Item key={index}>
                                {func(item)}
                            </Breadcrumb.Item>
                        )
                    })
                }
            </Breadcrumb>
            <h2 className="title">
                标题
            </h2>
        </div>
    );
}

export default Nav;